<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='#FFFFFF00' :isBack="true">
			<text slot='right-slot' class="center-slot" @tap="$navto('/pages/mine/long/eggRecord')">记录</text>
			<!-- 总龙蛋 -->
		</top-navigation>
		<view class="no-data-box flex-col justify-center align-center" v-if="!empy">
			<image class="no-data" src="/static/images/no-datapng.png" mode=""></image>
			暂无数据
			<view class="btn justify-center align-center" @tap="$navto('/pages/index/index?PageCur=0',false,4)">
				去购买商品
			</view>
		</view>
		<!-- 龙蛋结果 -->
		<view class="egg-bg flex-col align-center" v-if="isResult" :style="{ 'padding-top': calculateStatusBar}">
			<view class="close" @tap="closeResult">
				<u-icon name="close" size="40" color="#FFF"></u-icon>
			</view>
			<image class="gongxi-icon" src="/static/images/mine/gongxi1.png" mode="widthFix"></image>
			<view class="result-tip">
				开龙蛋得到以下龙
			</view>
			<image class="get-long-img" :src="open_egg[0].image" mode="widthFix"></image>
			<view class="result-long">
				{{open_egg[0].name}}
			</view>
			<view class="result-num">
				x{{open_egg[0].number}}
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>

		<!-- 我的baby -->
		<view class="top-box">
			<view class="flex-col justify-center align-center">
				<!-- <image @tap="$navto('/pages/mine/long/longEgg')" class="long-baby" src="/static/images/mine/open_log.png" mode=""></image> -->
				<view class="my-qing-long">
					总龙蛋 <text class="unit"> (颗)</text>
				</view>
				<view class="long-num">
					{{empy}}
				</view>
				<view class="my-qing-long-tip" v-if="true">
					点击龙蛋可豪气开蛋
				</view>
			</view>
		</view>
		<view class="good-box justify-between flex-wrap">
			<view class="longdan-box flex-col align-center" v-for="v,k in eggInfoList" @tap="openEgg(v)">
				<image class="longdan" :src="v.image" mode=""></image>
				<view class="name">
					{{v.name}}
				</view>
				<view class="number">
					x{{v.number}}
				</view>
			</view>
		</view>


		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			zIndex='10070' overlayOpacity='0.5'>
			<view class="popup-one-box flex-col align-center">
				<view class="title">
					盲开龙蛋
				</view>
				<view class="dan-num">
					数字龙蛋{{showData.number}}个 <text class="zhuangshi">|</text> {{showData.number}}连开
				</view>
				<view class="bg-long">
					<image class="long-dan-bg" src="/static/images/long/long_dan.png" mode="widthFix"></image>
				</view>
				<view class="popup-box-btn align-center justify-center" @click="openMap">
					豪气开龙蛋
				</view>
				<view class="user-agreement">
					<view class="justify-start align-start">
						<u-checkbox-group v-model="checked" size='14' inactiveColor='#212030'>
							<u-checkbox activeColor="#3ADD8F" name='true' inactiveColor='#212030' label=""></u-checkbox>
						</u-checkbox-group>
						<view class="tips">
							开龙蛋将会产生钻石，届时您的实物无法享受退款服务。请认真阅读并同意
							<text class='user-read' @tap="goAgreement('user')"> 《用户协议》 </text>
							<text class='user-read' @tap="goAgreement('privacy')"> 《隐私政策》
							</text>
							<text class='user-read' @tap="goAgreement('play')"> 《买家须知》
							</text>
						</view>

					</view>
				</view>

				<!-- 	<view class="popup-box-cancel align-center justify-center" @click="moneyShow=false">
					<image class="close-popup" src="/static/images/starmap/close.svg" mode=""></image>
				</view> -->
			</view>
		</u-popup>
		<!-- 弹窗 -->
		<u-popup :show="userShow" mode="bottom" round='20' @close="close" @open="open" zIndex='10076'
			overlayOpacity='0.85'>
			<view class="popup-box">
				<view class="title">
					开蛋须知
				</view>
				<view class="popup-content">
					开龙蛋将会产出钻石，届时您的实物无法享受退 款服务。请认真阅读并同意
					<text class='user-read' @tap="goAgreement('user')"> 《用户协议》 </text>和<text class='user-read'
						@tap="goAgreement('privacy')"> 《隐私政策》
					</text>
					<text class='user-read' @tap="goAgreement('play')"> 《买家须知》
					</text>
				</view>
				<button type="primary" class="popup-btn justify-center align-center" @click="agree">同意并继续</button>
				<view class="popup-btn-close justify-center align-center" @click="close">不同意</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				checked: [], //用户协议
				page: 1,
				pagesize: 0,
				totalpage: 0,
				empy: 0,
				current: 0,
				moneyShow: false,
				userShow: false,
				isResult: false,
				eggInfoList: [

				],
				showData: {},
				open_egg: []

			}
		},
		onLoad() {
			this.getIndex()
		},
		computed: {
			calculateStatusBar() {
				return `${this.statusHeight}px`;
			}
		},
		methods: {
			openEgg(v) {
				this.moneyShow = true
				this.showData = v
			},
			closeResult() {
				this.getIndex()
				this.isResult = false
			},
			// 开蛋
			async openMap() {
				if (!this.checked.length) {
					console.log('没有选择');
					this.userShow = true
					return
				}
				let {
					code,
					msg,
					data
				} = await this.$getRequest('/api/v1/open_egg')
				if (code == 200) {
					console.log(data, '静态资源');
					this.open_egg = data.list || []
					this.isResult = true
					this.moneyShow = false

				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}

			},
			agree() {
				this.checked = ['true']
				this.close()
				this.openMap()
			},
			close() {
				console.log('关闭事件');
				this.userShow = false
			},
			open() {
				console.log('打开事件');
			},
			goAgreement(e) {
				// 用户协议
				this.$navto('/pages/login/agreement?type=' + e)
			},
			// 获取龙蛋数量和内容
			async getIndex() {
				let url = '/api/v1/my_egg'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url)
				if (code == 200) {
					console.log(data, '静态资源');
					this.eggInfoList =data&&data.list || []
					let arr = 0
					this.eggInfoList.map(item => {
						arr += Number(item.number)
					})
					this.empy = arr
					// this.eggInfoList = this.eggInfoList.map(item => {
					// 	if (Number(item.number)!=0) {
					// 		return item
					// 	}
					// })
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			myCopy(value) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			bannerTap() {
				// banner点击
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.moneyShow = true
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.egg-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: url('/static/images/mine/egg_result_bg.png') no-repeat center center / 100% 100%;
		z-index: 100000;
		color: #FFF;

		.close {
			width: 100%;
			padding: 80rpx 40rpx 20rpx;
		}

		.result-tip {
			margin: 40rpx 0 70rpx;
			font-size: 25rpx;
			color: #FFF;
		}

		.gongxi-icon {
			width: 220rpx;
		}

		.result-long {
			margin: 26rpx 0 20rpx;
			font-size: 25rpx;
		}

		.result-num {
			font-size: 32rpx;
			font-weight: 700;
		}

		.get-long-img {
			width: 260rpx;
		}
	}

	.popup-box {
		border-radius: 20rpx 20rpx 0 0;
		background-color: #1A2131;

		.title {
			width: 100%;
			text-align: center;
			padding: 40rpx 0;
			font-size: 30rpx;
			font-weight: 700;
			color: #FFF;
		}

		.popup-content {
			padding: 0 80rpx;
			text-align: left;
			font-size: 24rpx;
			line-height: 1.5;
			color: #FFF;

			.user-read {
				margin: 0 10rpx;
				color: #3ADD8F;
			}
		}

		.popup-btn {
			margin: 70rpx auto 0;
			width: 616rpx;
			height: 90rpx;
			font-weight: 700;
			background: #27FF92;
			border-radius: 10rpx;
			color: #020600;
			font-size: 28rpx;

			&[disabled] {
				background-color: #f7f7f7 !important;
			}
		}

		.popup-btn-close {
			margin: 20rpx 0 70rpx;
			height: 62rpx;
			background: #27FF9200;
			border-radius: 10rpx;
			color: #818591;
			font-size: 28rpx;

		}
	}

	.big-box {
		min-height: 100vh;
		background: #16161e;
		padding: 0 32rpx 60rpx;

		.no-data-box {

			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -40%);
			color: #FFFFFFCC;
			font-size: 28rpx;

			.btn {
				margin-top: 60rpx;
				right: 0;
				height: 90rpx;
				width: 400rpx;
				border-radius: 8rpx;
				bottom: 120rpx;
				font-weight: 700;
				font-size: 30rpx;
				background: #20202c;
				color: #fff;
			}

		}

		.no-data {
			width: 220rpx;
			height: 220rpx;
			margin-bottom: 30rpx;
		}

		.center-slot {
			font-size: 26rpx;
			color: #FFF;
		}

	}

	.good-box {
		width: 100%;
	}

	.longdan-box {
		padding-bottom: 30rpx;
		background: #21202E;

		.longdan {
			width: 328rpx;
			height: 328rpx;
		}

		.name {
			margin-top: 28rpx;
			color: #FFF;
			font-size: 28rpx;
			font-weight: bold;
		}

		.number {
			margin-top: 28rpx;
			color: #FFF;
			font-size: 33rpx;
			font-weight: bold;
		}
	}

	.top-box {
		width: 100%;
		position: relative;
		margin: 20 auto 26rpx;
		padding: 26rpx 32rpx;
		border-radius: 16rpx;

		.long-baby {
			position: absolute;
			top: 40rpx;
			right: 0;
			width: 96rpx;
			height: 96rpx;
		}

		.my-qing-long {
			color: #FFFFFFCC;
			font-size: 24rpx;

			.unit {
				margin-left: 15rpx;
			}
		}

		.my-qing-long-tip {
			color: #FFFFFFCC;
			font-size: 24rpx;
		}

		.long-num {
			margin: 20rpx 0 26rpx;
			font-size: 80rpx;
			color: #27ff92;


		}
	}

	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: #132436;
		padding: 40rpx 40rpx 40rpx;

		.title {
			font-size: 30rpx;
			color: #FFF;
			font-weight: 700;
			margin-bottom: 30rpx;
		}

		.dan-num {
			color: #9FA5B1;
			font-size: 24rpx;
			margin-bottom: 100rpx;

			.zhuangshi {
				margin: 0 10rpx;
			}
		}

		.long-dan-bg {
			width: 480rpx;
		}


		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}

		.popup-box-btn {
			width: 480rpx;
			height: 90rpx;
			background: #0BFF8D;
			color: #202426;
			font-size: 30rpx;
			border-radius: 8rpx;
			font-weight: 700;
		}

		.user-agreement {
			margin-top: 36rpx;
			flex: 1;
			font-size: 23rpx;
			color: #93939C;

			.tips {
				flex: 1;
				flex-wrap: wrap;
				line-height: 1.5;
			}

			.user-read {
				// margin: 0 5rpx;
				color: #3ADD8F;
			}
		}


		.popup-box-cancel {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: -120rpx;
		}

		.close-popup {
			width: 48rpx;
			height: 48rpx;
		}

		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}






	}
</style>